<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>iPhone map widget</title>
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAXs6fffdzf-Y3421qG3pbLhSYJ1Ji2XwFrjQNj8NEcWgikurwwxSksjfcPju0lN1KIGovWSqRRGRbjQ" type="text/javascript"></script>
		<script src="../gmaps-utility-library/labeledmarker/src/labeledmarker.js" type="text/javascript"></script>
		
		<link rel="stylesheet" href="iphone.css" />
		<!-- base library -->
		<script type="text/javascript" src="mootools-core.js"></script>
		<script type="text/javascript" src="iphone.js"></script>
		
		<script type="text/javascript">
		//<![CDATA[
			var map;
			
			function resizeDiv() {
				var mapEl = document.getElementById("map");
				mapEl.style.width = (window.innerWidth - 0) + 'px';
				mapEl.style.height = (window.innerHeight - 0) + 'px';
			}
			
			
			function load() {
				var params = {};
				if (GBrowserIsCompatible()) {
					var mapEl = document.getElementById("map");
					try {
						var paramsArr = String(document.location).split('?')[1].split('&');
						for (var i = 0; i < paramsArr.length; ++i) {
							var p = paramsArr[i].split('=');
							params[p[0]] = p[1];
						}
					}
					catch (e) {}
					
					resizeDiv();
					

					//default centre is centre of HK (around shatin)
					var lat = (params['latitude'] ? parseFloat(params['latitude']) : 22.366586);
					var lng = (params['longitude'] ? parseFloat(params['longitude']) : 114.176788);

					//default zoom level is 17
					var zoom = (params['zoom'] ? parseInt(params['zoom']) : 17);
					
					map = new GMap2(mapEl);
					map.setCenter(new GLatLng(lat, lng), zoom);
					
					var imap = new WF.iPhoneGMap(map);
					
					//allow control widget to be added
					//map.addControl(new GSmallMapControl());

					try {
						mapEl.childNodes[1].style.visibility = 'hidden';
						mapEl.childNodes[2].style.visibility = 'hidden';
					}
					catch (e) {}
				}

				//addFlag(22.366586, 114.176788, 'hello world', 'hello info xxx');
				//addFlag(22.366000, 114.176000, 'hello world', 'hello info xxx');
				//alert("hello world");
			}

			function addFlag(lat, lng, text, info)
			{
				/*point = new GLatLng(lat, lng);
				markerOptions = { title:text};

				var marker = new GMarker(point, markerOptions);

				GEvent.addListener(marker, "click", function() {
					marker.openInfoWindowHtml(info);
				});

				map.addOverlay(marker);*/
		        var marker = new LabeledMarker(new GLatLng(lat, lng), 
					{
						"clickable": true,
						"title": text,
						"labelText": text,
						"labelOffset": new GSize(-50, 0),
						"labelClass": "wf_map_flag_label"
					});
				GEvent.addListener(marker, "click", function() {
					marker.openInfoWindowHtml(info);
				});
				map.addOverlay(marker);
			}

		//]]>
		</script>
  </head>

 <body style="margin: 0px;" onload="load()" onunload="GUnload()" onresize="resizeDiv()">
   <div id="map" style="border: 0px solid black"/>
  </body>
</html>
